<template>
  <div class="home-container">
    <svg-icon class="home-img" name="vite" :size="36"></svg-icon>
    <h2 class="home-title">{{ msg }}, {{ userStore.userInfo?.username }}</h2>
    <h3>Welcome~</h3>
    <!-- <img class="welcome-img" src="@/assets/imgs/welcome.png" alt="welcome" /> -->
  </div>
</template>

<script setup lang="ts">
import useUserStore from '@/store/modules/user'

const userStore = useUserStore()

const msg = ref()
onMounted(() => {
  msg.value = getWelcomeMsg()
})

const getWelcomeMsg = () => {
  const hours = new Date().getHours()
  console.log('hours', hours)
  let msg = ''
  if (hours < 5) {
    msg = '天快亮啦'
  } else if (hours < 9) {
    msg = '早上好'
  } else if (hours < 11) {
    msg = '上午好'
  } else if (hours >= 11 && hours <= 13) {
    msg = '中午好'
  } else if (hours <= 17) {
    msg = '下午好'
  } else if (hours <= 24) {
    msg = '晚上好'
  }

  return msg
}
</script>

<style scoped lang="scss">
.home-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 1px;
  background-color: #f5f5f5;
}

.home-title {
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: bold;
}

.home-img {
  // width: 330px;
  margin-bottom: 20px;
}

.welcome-img {
  width: 80%;
  margin: 20px auto;
}
</style>
